<template>
 <div class="app-container">
            <div class="cbox">
              <el-form class="form" ref="flt" :model="from" :rules="rules" label-width="10rem" size="mini">
                <el-row :gutter="15" class="row">
                  <el-col :span="4">
                    <el-form-item label="供应商名称：">
                      <el-input   placeholder="请输入供应商名称" v-model="from.khName" style="width: 100%" clearable></el-input>
                    </el-form-item>
                  </el-col>
                <el-col :span="4">
                  <el-form-item label="所属港/站：" prop="ssgk">
                      <el-select  filterable allow-create clearable v-model="from.gzName" >
                        <el-option
                          v-for=" item in listData"
                          :key="item.potCd"
                          :value="item.potCname"
                          :label="item.potCname"
                        ></el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                  <el-col :span="2">
                    <el-form-item label-width="10px">
                      <el-button @click="searchType" type="primary">查询</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <el-row :gutter="10" class="btn-area">
                <el-col :span="24">
                  <el-button size="mini" type="success" plain @click="add">新增供应商</el-button>
                  <el-button size="mini" type="primary" plain @click="del('diong')">编辑供应商</el-button>
                  <el-button size="mini" type="primary" plain @click="examine" disabled>导入供应商</el-button>
                  <el-button plain size="mini" type="primary" @click="viewDetails">刷新</el-button>
                  <el-button plain size="mini" type="primary" @click="reset" disabled>下载导入模板</el-button>

                </el-col>
            </el-row>
            <div class="table">
                <div class="inner" ref="inner">
                  <!-- <div class="btn-area" ref="btnArea">
                    <el-button plain size="mini" type="primary" @click="add">新增供应商</el-button>
                    <el-button plain size="mini" type="primary" @click="del('diong')">编辑供应商</el-button>
                    <el-button plain size="mini" type="primary" @click="examine" disabled>导入供应商</el-button>
                    <el-button plain size="mini" type="primary" @click="reset" disabled>下载导入模板</el-button>
                    <el-button plain size="mini" type="primary" @click="viewDetails">查看</el-button>
                  </div> -->
                    <el-table
                      :data="DetailedData"
                      border
                      :height="maxHeight"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                       @row-dblclick='rowdbClick'
                      @row-click="rowClick">
                      <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="fltCode" show-overflow-tooltip label="供应商账号"></el-table-column>
                      <el-table-column prop="fltName" show-overflow-tooltip label="供应商名称"></el-table-column>
                      <el-table-column prop="fltPorts" show-overflow-tooltip label="所属港/站"></el-table-column>
                      <el-table-column align="center"  prop="fltTypes" show-overflow-tooltip label="供应商类型"></el-table-column>
                      <el-table-column prop="fltLinkperson" show-overflow-tooltip label="联系人"></el-table-column>
                      <el-table-column align="center"  prop="fltLinkphone" show-overflow-tooltip label="联系电话"></el-table-column>
                      <el-table-column prop="fltEmail" show-overflow-tooltip label="联系Eamil"></el-table-column>
                      <el-table-column prop="fltUrl" show-overflow-tooltip label="供应商网址"></el-table-column>
                      <el-table-column prop="fltX" show-overflow-tooltip label="供应商地址定位">
                        <template slot-scope="scope">
                           {{scope.row.fltX}},{{scope.row.fltY}}
                        </template>
                      </el-table-column>
                      <el-table-column align="center" prop="fltLisenses" show-overflow-tooltip label="授权用户数 "></el-table-column>
                      <el-table-column align="center"  prop="fltLisensestruck" show-overflow-tooltip label="授权车辆数"></el-table-column>
                      <el-table-column align="center"  prop="fltStatus" show-overflow-tooltip label="状态">
                        <template slot-scope="scope">
                            <div v-if="scope.row.fltStatus == 'Y'">激活</div>
                            <div v-if="scope.row.fltStatus == 'N'">未激活</div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
             </div>
               <!-- 分页 -->
                <el-pagination
                  class="pagination"
                  small
                  background
                  ref="pagination"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="Pagination.currentPage"
                  :page-sizes="Pagination.pageSizeList"
                  :page-size="Pagination.pageSize"
                  :layout="Pagination.layout"
                  :total="Pagination.total"
                ></el-pagination>
        <!-- 弹出框 新增 编辑 -->
        <el-dialog
          :title='addText'
          :visible.sync="addShowA"
          v-if="addShowA"
          v-el-drag-dialog
          :close-on-click-modal="false">
              <el-form  label-width="14rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                    <el-row >
                      <el-col :span="10">
                        <el-form-item prop="fltCode" label="供应商账号：">
                          <el-input maxlength="10" :disabled='disabled' v-model="xzData.fltCode" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="10">
                        <el-form-item prop="fltName" label="供应商名称：">
                          <el-input maxlength="20" :disabled='disabled' v-model="xzData.fltName" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                          <el-form-item  label="类型：" prop="fltType">
                              <el-select   filterable multiple :disabled='disabled'  allow-create clearable v-model="xzData.fltType">
                                <el-option
                                  v-for=" item in listDataA"
                                  :key="item.RV_LOW_VALUE"
                                  :value="item.RV_LOW_VALUE"
                                  :label="item.RV_CMEANING"
                                ></el-option>
                              </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="10">
                          <el-form-item label="状态：" prop="fltStatus">
                              <el-select  filterable allow-create :disabled='disabled' clearable v-model="xzData.fltStatus" >
                                <el-option
                                  v-for=" item in listDataB"
                                  :key="item.cCode"
                                  :value="item.cCode"
                                  :label="item.cCName"
                                ></el-option>
                              </el-select>
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item prop="fltLinkperson" label="联系人：">
                              <el-input maxlength="10" :disabled='disabled' v-model="xzData.fltLinkperson" clearable></el-input>
                            </el-form-item>
                          </el-col>
                        <el-col :span="10">
                            <el-form-item prop="fltLinkphone" label="联系电话：">
                              <el-input maxlength="20" :disabled='disabled' v-model="xzData.fltLinkphone" clearable></el-input>
                            </el-form-item>
                          </el-col>
                  </el-row>
                  <el-row>
                        <el-col :span="10">
                            <el-form-item prop="fltLisenses" label="授权用户数：">
                              <el-input maxlength="3" :disabled='disabled' v-model="xzData.fltLisenses" clearable></el-input>
                            </el-form-item>
                          </el-col>
                        <el-col :span="10">
                            <el-form-item prop="fltLisensestruck" label="授权车量数：">
                              <el-input maxlength="3" :disabled='disabled' v-model="xzData.fltLisensestruck" clearable></el-input>
                            </el-form-item>
                          </el-col>
                  </el-row>
                  <el-row>
                        <el-col :span="10">
                          <el-form-item label="所属省市：" prop="fltPrvCode">
                              <el-select :disabled='disabled'  filterable allow-create clearable v-model="xzData.fltPrvCode" @change='fltPrvCodechange' >
                                <el-option
                                  v-for=" item in listDataC"
                                  :key="item.PRV_CODE"
                                  :value="item.PRV_CODE"
                                  :label="item.PRV_CHNNAME"
                                ></el-option>
                              </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="10">
                          <el-form-item label="所属港/站：" prop="fltPorts">
                              <el-select :disabled='disabled'  filterable allow-create clearable v-model="xzData.fltPorts" >
                                <el-option
                                  v-for=" item in listDataD"
                                  :key="item.potCname"
                                  :value="item.potCname"
                                  :label="item.potCname"
                                ></el-option>
                              </el-select>
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item prop="fltEmail" label="联系Email：">
                              <el-input maxlength="20" :disabled='disabled' v-model="xzData.fltEmail" clearable></el-input>
                            </el-form-item>
                          </el-col>
                        <el-col :span="10">
                            <el-form-item prop="fltUrl" label="供应商网址：">
                              <el-input maxlength="20" :disabled='disabled' v-model="xzData.fltUrl" clearable></el-input>
                            </el-form-item>
                          </el-col>
                  </el-row>
                  <el-row>
                        <el-col :span="10">
                            <el-form-item prop="fltInterval" label="APP发送时间间隔：">
                              <el-input maxlength="6" :disabled='disabled' v-model="xzData.fltInterval" clearable></el-input>
                            </el-form-item>
                          </el-col>
                        <el-col :span="10">
                          <el-form-item label="供应商等级：" prop="fltGrade">
                              <el-select :disabled='disabled'  filterable allow-create clearable v-model="xzData.fltGrade" >
                                <el-option
                                  v-for=" item in listDataE"
                                  :key="item.cCode"
                                  :value="item.cCode"
                                  :label="item.cCName"
                                ></el-option>
                              </el-select>
                          </el-form-item>
                        </el-col>
                  </el-row>
                  <el-row>
                        <el-col :span="12">
                            <el-form-item prop="fltX" label="供应商地址定位；">
                              <el-input maxlength="12" style="width: 36%" :disabled='disabled' v-model="xzData.fltX" clearable></el-input>
                              <el-input maxlength="12" style="width: 37%; margin-left: 10px;" :disabled='disabled'  v-model="xzData.fltY" clearable></el-input>
                              <el-button  @click="showDialog = true" type="text">定位</el-button>
                            </el-form-item>
                          </el-col>
                  </el-row>
                  <el-row>
                        <el-col :span="20">
                            <el-form-item prop="fltRemark" label="供应商介绍：">
                              <el-input maxlength="32" :disabled='disabled'  type="textarea" v-model="xzData.fltRemark" clearable></el-input>
                            </el-form-item>
                          </el-col>
                  </el-row>

                <el-dialog
                  title="地图定位"
                  append-to-body
                  v-el-drag-dialog
                  :close-on-click-modal="false"
                  :close-on-press-escape="false"
                  v-if="showDialog"
                  :visible.sync="showDialog">
                  <baidu-map-pop @choose="choose"></baidu-map-pop>
                </el-dialog>
              </el-form>
              <div slot="footer" class="dialog-footer">
                    <el-button size="mini" type="primary" v-if="see" @click="saveEditor('xzData')">保存</el-button>
                    <el-button size="mini" @click="close">关闭</el-button>
              </div>
        </el-dialog>

      <!-- 弹出框 导入供应商 -->
        <el-dialog
          :title='addText'
          :visible.sync="addShowB"
          v-if="addShowB"
           width="80%"
          :close-on-click-modal="false">
              <el-form  label-width="10rem"  size="mini">
                  <el-row >
                      <el-col :span="2">
                        <el-form-item label-width="10px">
                          <el-upload
                              class="upload-demo"
                              action="https://jsonplaceholder.typicode.com/posts/"
                              :on-preview="handlePreview"
                              :on-remove="handleRemove"
                              :before-remove="beforeRemove"
                              multiple
                              :limit="3"
                              :on-exceed="handleExceed"
                              :file-list="fileList">
                               <el-button size="small" type="primary">浏览</el-button>
                            </el-upload>

                        </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
                  <el-table
                      :data="DetailedDataA"
                      border
                      :height="500"

                      :header-cell-style="{ textAlign: 'center' }"
                      @row-click="rowClickA">
                      <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="shbz" show-overflow-tooltip label="供应商代码" width="120"></el-table-column>
                      <el-table-column prop="yhm" show-overflow-tooltip label="供应商名称" width="120"></el-table-column>
                      <el-table-column prop="sjhm" show-overflow-tooltip label="省市名称" width="120"></el-table-column>
                      <el-table-column prop="yhyx" show-overflow-tooltip label="港口名称" width="120"></el-table-column>
                      <el-table-column prop="shr" show-overflow-tooltip label="联系人" width="120"></el-table-column>
                      <el-table-column prop="shsj" show-overflow-tooltip label="联系电话" width="120"></el-table-column>
                      <el-table-column prop="shsj" show-overflow-tooltip label="地址" width="200"></el-table-column>
                      <el-table-column prop="shsj" show-overflow-tooltip label="授权" width="120"></el-table-column>
                      <el-table-column prop="shsj" show-overflow-tooltip label="授权车辆" width="120"></el-table-column>
                      <el-table-column prop="shsj" show-overflow-tooltip label="APP坐标发送时间间隔" width="170"></el-table-column>
                      <el-table-column prop="shsj" show-overflow-tooltip label="错误原因" width="150"></el-table-column>
                    </el-table>
                    <!-- 分页 -->
                      <div class="block">
                        <el-pagination
                          class="pagination"
                          small
                          background
                          ref="pagination"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="Pagination.currentPage"
                          :page-sizes="Pagination.pageSizeList"
                          :page-size="Pagination.pageSize"
                          :layout="Pagination.layout"
                          :total="Pagination.total"
                        ></el-pagination>
                      </div>
               <div  class="dialog-footer">
                  <div class="btn">
                      <el-button type="primary" @click="examineBC">保存</el-button>
                    <el-button  @click="close">关闭</el-button>
                  </div>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import {
  supplierCreationList,
  shengCityManagementXL,
  // getPortsInfo,
  addSupplierCreation,
  editSupplierCreation,
  typeData,
  typeDataA,
  XLSupplierCreation
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import BaiduMapPop from '@/components/baidumap'

export default {
  mixins: [resizeMixin,paginationMixin],
  components: {
    BaiduMapPop
  },
  data(){
    return{
      disabled:false,
      from:{
        khName:'',
        gzName:''
      },
      listData:[],
      listDataA:[],
      listDataB:[
        {cCode:'Y',cCName:'激活'},
        {cCode:'N',cCName:'未激活'},
      ],
      listDataC:[],
      listDataD:[],
      listDataE:[
        {cCode:'A',cCName:'一般'},
        {cCode:'B',cCName:'优秀'},
      ],
      maxHeight:-1,
      diong:'E',
      addText:'',
      showDialog: false, //地图
      tempLocation: null, // 当前选中的位置的地址
      addShowA:false, // 新增 编辑
      addShowB:false, //  导入供应商
      see:true, //保存按钮
      DetailedData:[], //
      DetailedDataA:[],
      xzData:[],// 传给新增 编辑弹出框的数据
      itemData:[],//当前行数据
      //表单验证 新增 编辑
      addRules:{
        fltCode:[
          { required: true, message: '请填写供应商账号', trigger:'blur'}
        ],
        fltName:[
          { required: true, message: '请填写供应商名称', trigger:'blur'}
        ],
        fltType:[
          { required: true, message: '请选择类型', trigger:'blur'}
        ],
        fltStatus:[
          { required: true, message: '请选择状态', trigger:'change'}
        ],
        fltLinkperson:[
          { required: true, message: '请填写联系人', trigger:'blur'}
        ],
        fltLinkphone:[
          { required: true, message: '请填写联系电话', trigger:'blur'},
          {
            pattern: /^[0-9]+$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        fltLisenses:[
          { required: true, message: '请填写用户数', trigger:'blur'},
          {
            pattern: /^[0-9]+$/,
            message: '请输入数字',
            trigger: 'blur'
          }
        ],
        fltLisensestruck:[
          { required: true, message: '请填写车量数', trigger:'blur'},
          {
            pattern: /^[0-9]+$/,
            message: '请输入数字',
            trigger: 'blur'
          }
        ],
        fltPrvCode:[
          { required: true, message: '请选择省市', trigger:'change'}
        ],
        fltPorts:[
          { required: true, message: '请选择所属港/站', trigger:'change'}
        ],
        fltEmail: [
          {
            pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
            message: '请输入正确的Email',
            trigger: 'blur'
          },
        ],
      },
    }
  },
  created(){
    this.refreshList()
    this.sData()
    // this.GZData()
    this.GZDataA()
    this.LXData()
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){

  },
  methods:{
    //选中省  调用港站接口
    fltPrvCodechange(row){
      console.log(row)
      typeDataA({potPrvCode:row}).then(res=>{
        this.listDataD = res.data.FTKJWLHYPT
      })
    },
    // 点击搜索
    searchType(){
      this.refreshList()
    },
    //所属港/站下拉框
    GZDataA(){
      XLSupplierCreation().then(res =>{
        this.listData = res.data.FTKJWLHYPT
      })
    },
    //类型下拉框
    LXData(){
      typeData().then(res=>{
        this.listDataA = res.data
      })
    },
    //省下拉框
    sData(){
      shengCityManagementXL().then(res=>{
        this.listDataC = res.data.FTKJWLHYPT
      })
    },
    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      supplierCreationList({
        fltName: this.from.khName,
        fltPorts:this.from.gzName,
        PageIndexs:this.Pagination.currentPage.toString(),
        PageSizes:this.Pagination.pageSize.toString()
      }).then(response => {
        this.DetailedData = response.data

        updateTotal(Number(response.total))
      })
    },
    //新增
    add(){
      this.addText='新增供应商'
      this.diong=''
      this.addShowA=true
      this.see = true
      this.disabled = false
      this.xzData= {
        fltName:'',
        fltCode:'',
        fltType:[],
        fltTypes:[],
        fltStatus:'Y',
        fltLinkperson:'',
        fltLinkphone:'',
        fltLisenses:'0',
        fltLisensestruck:'',
        fltPrvCode:'',
        fltPorts:'',
        fltEmail:'',
        fltUrl:'',
        fltInterval:'',
        fltGrade:'',
        fltX:'121.490000',
        fltY:'31.172377',
        fltRemark:'',
      }
    },
    //编辑
    del(){
      if (Object.keys(this.itemData).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.addText='编辑供应商'
      this.diong='E'
      this.addShowA=true
      this.see = true
      this.disabled = false
      this.xzData =this.itemData
      // 字符串转数组
      if (this.xzData.fltType) {
        let arrs= []
        let arr=this.xzData.fltType.split(',')

        arr.forEach(item => {
          arrs.push(item)
        })
        this.xzData.fltType = arrs
      }
    },
    //新增 编辑  点击保存
    saveEditor(xzData){
      this.$refs[xzData].validate((valid) => {
        if (valid) {
          if (this.diong ==='E') {
            editSupplierCreation(this.xzData).then( () =>{
              this.$message ({
                type: 'success',
                message: '编辑成功'
              })
              this.close()
              this.refreshList()
            })

          }else{
            addSupplierCreation(this.xzData).then(() => {
              this.$message ({
                type: 'success',
                message: '添加成功'
              })
              this.close()
              this.refreshList()
              this.$refs[xzData].resetFields()
            })
          }
        } else {
          return false
        }
      })
    },
    //导入供应商
    examine(){
      this.addText='导入供应商'
      this.addShowB=true
    },
    //双击查看
    rowdbClick(){
      // this.viewDetails()
      this.addText='供应商详细'
      this.addShowA=true
      this.see=false
      this.disabled = true
      this.xzData = Object.assign({}, this.itemData)
      // 字符串转数组
      if (this.xzData.fltType) {
        let arrs= []
        let arr=this.xzData.fltType.split(',')

        arr.forEach(item => {
          arrs.push(item)
        })
        this.xzData.fltType = arrs
      }
    },
    //点击刷新
    viewDetails(){
      this.refreshList()
      this.$message ({
        type: 'success',
        message: '刷新成功'
      })
    },
    //点击保存
    examineBC(){
      this.$message ({
        type: 'success',
        message: '保存成功'
      })
      this.close()
    },
    //获取当前行数据
    rowClick(row){
      this.itemData = row
    },
    // 点击确定保存地址
    // saveAddress () {
    //   if (this.tempLocation) {
    //     this.FLT_INFO.fltX = this.tempLocation.point.lng
    //     this.FLT_INFO.fltY = this.tempLocation.point.lat
    //     this.FLT_INFO.tmnAddress = this.tempLocation.address
    //   }
    //   this.tempLocation = null
    //   this.showDialog = false
    // },
    // 地图选点回调
    choose(res) {
      this.tempLocation = res
      if(res){
        this.xzData.fltX=res.point.lng
        this.xzData.fltY=res.point.lat
        this.$confirm('选取坐标成功!', '提示', {
          confirmButtonText: '确定'
        }).then(()=>{
          this.showDialog=false
        })
      }
    },
    // 关闭弹出框
    close(){
      this.addShowA=false
      this.addShowB=false
    }
  }
}
</script>

<style  lang="scss" scoped>
.el-select {
    width: 100%;
}
.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  .table {
    flex: 1;
    position: relative;
    overflow: hidden;

    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
</style>
